<template>
    <div class="filters">
        <el-row
            type="flex"
            class="filters-top"
            justify="space-between"
            align="middle"
        >
            <el-col :span="8"> 单程： {{data.info.departCity}} - {{data.info.destCity}} / {{data.info.departDate}} </el-col>

            <el-col :span="4">
                <el-select
                    size="mini"
                    v-model="airport"
                    placeholder="起飞机场"
                    @change="runFilters"
                >
                  <el-option
                        v-for="(airport, index) in data.options.airport"
                        :key="index"
                        :value="airport"
                        :label="airport"
                    > </el-option>
                </el-select>
            </el-col>

            <el-col :span="4">
                <el-select
                    size="mini"
                    v-model="flightTimes"
                    placeholder="起飞时间"
                    @change="runFilters"
                >
                    <el-option
                        v-for="(time, index) in data.options.flightTimes"
                        :key="index"
                        :label="time.from + ':00' + ' - ' + time.to + ':00'"
                        :value="time.from + ',' + time.to"
                    > </el-option>
                </el-select>
            </el-col>

            <el-col :span="4">
                <el-select
                    size="mini"
                    v-model="company"
                    placeholder="航空公司"
                    @change="runFilters"
                >
                  <el-option
                        v-for="(company, index) in data.options.company"
                        :key="index"
                        :label="company"
                        :value="company"
                    > </el-option>
                </el-select>
            </el-col>

            <el-col :span="4">
                <el-select
                    size="mini"
                    v-model="airSize"
                    placeholder="机型"
                    @change="runFilters"
                >
                  <el-option
                    v-for="(size,index) in sizeTable"
                    :key="index"
                    :label="size.label"
                    :value="size.value">
                  </el-option>
                </el-select>
            </el-col>

        </el-row>
        <div class="filter-cancel">
            筛选：
            <el-button
                type="primary"
                round
                plain
                size="mini"
                @click="handleFiltersCancel"
            >
                撤销
            </el-button>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['data'],
        data() {
            return {
                airport: '',
                flightTimes: '',
                company: '',
                airSize: '',
                sizeTable:[
                  {
                    label:'大',
                    value:'L'
                  },
                  {
                    label:'中',
                    value:'M'
                  },
                  {
                    label:'小',
                    value:'S'
                  },
                ],
                rules:{
                  // 纯函数, 不依赖当前环境
                  // 不对当前数据造成副作用
                  // 相同的输入, 每次都能够得到相同的输出
                  airport:(flights,userOption) => {
                    return flights.filter(item=>{
                      return item.org_airport_name == userOption
                    })
                  },
                  flightTimes:(flights,userOption) => {
                    const from = Number(userOption.split(',')[0])
                    const to = Number(userOption.split(',')[1])
                    return flights.filter(item=>{
                        const depTime = Number(item.dep_time.split(':')[0])
                        return depTime >= from && depTime < to
                    })
                  },
                  company:(flights,userOption) => {
                    return flights.filter(item=>{
                      return item.airline_name == userOption
                    })
                  },
                  airSize:(flights,userOption) => {
                    return flights.filter(item=>{
                      return item.plane_size == userOption
                    })
                  }
                }
            }
        },
        methods: {
            runFilters(){
              let flights = [...this.data.flights]

              // 遍历规则配置, 配置中的每个 key 都可以拿出来
              for (const key in this.rules) {
                // 拿到用户选择
                // 如果当前 key == this.airport
                // this[key] == this.airport
                const userOption = this[key]
                // 拿到对应选择的处理函数
                const filterFn = this.rules[key]

                // 如果用户有选择，就执行这个函数，否则不执行
                if(userOption){
                  flights = filterFn(flights,userOption)
                }
              }
              this.$emit("setFilteredList", flights);
            },
            handleFiltersCancel() {
              // 清空所有筛选的选项
              this.airport = ''
              this.flightTimes = ''
              this.company = ''
              this.airSize = ''
              // 执行筛选过滤
              this.runFilters()
            }
        }
    };
</script>

<style>
</style>